<template>
  <div>
    <h3>我是子组件-- {{ a }}, {{ b }}</h3>
    <button @click="updateB">修改数据</button>
  </div>
  <div>store里面的全局数据： {{ useCounter.count }}</div>
  <div>
    <button @click="updateStore">修改pinia里面的数据</button>
  </div>
  <div>测试解构丢失响应式的语法 name: {{ name }} id: {{ id }}</div>
  <button @click="updateNaemAndiD">修改name和id</button>
</template>

<script setup lang="ts">
import { useCounterStore } from '../store/index.ts';
import { useCartStore } from '../store/cart.ts';
import { reactive, toRefs } from 'vue';
import { storeToRefs } from 'pinia';

const obj = reactive({ name: 'zs', id: 111 });
console.log(obj);

// let { name, id } = obj;
let { name, id } = toRefs(obj);
console.log(name, id);
const updateNaemAndiD = () => {
  name.value = '修改';
  id.value++;
};

const useCounter = useCounterStore();
const useCart = useCartStore();

const { cartList, filterCartList, updateCart } = storeToRefs(useCart);

console.log(111, useCart.cartList, useCart.filterCartList);

const updateStore = () => {
  useCounter.increment();
};

// const props = defineProps({
//   a: {
//     type: String,
//     default: '12',
// required: true
//   },
// });

// const abc = defineEmits(['updateB']);
const abc = defineEmits<{
  // (e: string, b: number): void;
  (e: 'updateB', xxxx: number): void;
}>();

// ts默认值 工作里面 写vue3的时候 再去看官网
const props = withDefaults(
  defineProps<{
    a: string;
    b?: number;
  }>(),
  {
    b: 100,
  }
);

const updateB = () => {
  // this.$emit('eventxx', xxx)
  abc('updateB', props.b + 1);
};

// js里面使用这个a
console.log(props.a);
</script>
